<template>
  <el-dialog v-model="state.visible" append-to-body title="录入备忘信息">
    <el-input v-model="state.remark" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.visible = false">取消</el-button>
        <el-button type="primary" @click="toConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
  const $baseMessage = inject('$baseMessage')
  const state = reactive({
    visible: false,
    remark: '',
    day: '',
  })
  const toConfirm = () => {
    if (state.remark) {
      const mMapStr = localStorage.getItem('remarkMap')
      let mMap = {}
      if (mMapStr) {
        mMap = JSON.parse(mMapStr)
        mMap[state.day] = state.remark
      } else {
        mMap[state.day] = state.remark
      }
      window.localStorage.setItem('remarkMap', JSON.stringify(mMap))
      _emits('saveCallback')
      state.visible = false
    } else {
      $baseMessage('请输入备注信息', 'error')
    }
  }
  defineExpose({
    openHandle: (day) => {
      state.remark = ''
      state.day = day
      state.visible = true
    },
  })
  const _emits = defineEmits(['saveCallback'])
</script>
<style lang="scss">
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
</style>
